var tabIndex = 0;// 今日/近7日/近30日 时间索引
var timer;//地图轮播定时器
var mapChart;//全局地图对象
var cityLength;//地图城市的个数
$(function () {
    resizeHtmlFont(); //加载页面时,先调用一次更改html的font-size大小
    window.onresize = function () { //当窗口大小发生变化时触发
        resizeHtmlFont();
    };
    getMapData(); //地图部分
    getProvinceTotalData(); //全省办理总数
    getLoginAnalysisData(); //用户登录分析
    getRiskStatisticsData(); //业务风险统计
    getBusinessTrendData(); //业务办理趋势
    getFailBusinessData(); //业务办理失败分析

    $(".tab li").bind("click", function () {
        clearInterval(timer);
        $(this).addClass('active').siblings().removeClass('active');
        if ($(this).attr('data-type') == '2') {
            tabIndex = 2;
        }
        if ($(this).attr('data-type') == '1') {
            tabIndex = 1;
        }
        if ($(this).attr('data-type') == '0') {
            tabIndex = 0;
        }
        getMapData();
    });
})

//用户登录分析数据
function getLoginAnalysisData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //             drawLoginAnalysisChart(result.data);
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: {}
    }
    // 处理数据...

    let dataObj = {
        color: ['#5B8FF9', '#5AD8A6', '#586D90', '#F6BD16'],
        legend: ['uhey登录', '账号登录', '短信登录', '扫码登录'],
        xAxis: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
        series: [
            {
                name: 'uhey登录',
                type: 'line',
                data: [7, 5, 8, 3, 1, 2, 5, 4, 8, 9, 4, 2, 7, 5, 8, 3, 1, 2, 5, 4, 8, 9, 4, 2]
            },
            {
                name: '账号登录',
                type: 'line',
                data: [17, 15, 18, 13, 11, 12, 15, 14, 18, 19, 14, 12, 17, 15, 18, 13, 11, 12, 15, 14, 18, 19, 14, 12]
            },
            {
                name: '短信登录',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                name: '扫码登录',
                type: 'line',
                data: [7, 15, 8, 13, 1, 12, 5, 14, 8, 19, 4, 2, 7, 15, 8, 13, 1, 12, 5, 14, 8, 19, 4, 2]
            }
        ]
    }
    drawLoginAnalysisChart(dataObj);
}

//用户登录分析图形
function drawLoginAnalysisChart(dataObj) {
    let chart = echarts.init(document.getElementById('login-analysis-chart'));
    let option = {
        color: ['#5B8FF9', '#5AD8A6', '#586D90', '#F6BD16'],
        grid: {
            left: '10%',
            right: '5%',
            top: '15%'
        },
        legend: {
            bottom: '5%',
            textStyle: {
                color: '#CCCCCC',
            },
            data: dataObj.legend
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            data: dataObj.xAxis
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {color: '#353E47'}
            }
        },
        series: dataObj.series
    };
    chart.setOption(option);
    $(window).resize(function () {
        setTimeout(function () {
            chart.resize();
        }, 50)
    });
}

//业务风险统计
function getRiskStatisticsData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: {
            'num1': 104,
            'num2': 14,
            'num3': 2104,
            'num4': 64,
        }
    }

    //处理数据...

    $('#especial-serious-num').text(result.data.num1);//特别严重
    $('#serious-num').text(result.data.num2);//严重
    $('#heavier-num').text(result.data.num3);//较重
    $('#commonly-num').text(result.data.num4);//一般

    let dataObj = {
        insideData: [
            {value: 1048, name: '业务数据安全'},
            {value: 735, name: '用户行为安全'},
            {value: 580, name: '业务流程安全'},
            {value: 484, name: '前台配置监控'}
        ],
        outsideData: [
            {value: 108, name: '业务数据安全'},
            {value: 75, name: '用户行为安全'},
            {value: 50, name: '业务流程安全'},
            {value: 44, name: '前台配置监控'},
            {value: 104, name: '业务数据安全'},
            {value: 73, name: '用户行为安全'},
            {value: 58, name: '业务流程安全'},
            {value: 48, name: '前台配置监控'}
        ],
    }

    drawRiskStatisticsChart(dataObj);
}

//业务风险统计饼图
function drawRiskStatisticsChart(dataObj) {
    let chart = echarts.init(document.getElementById('risk-statistic-chart'));
    let option = {
        color: ['#8C5DB6', '#C8E5F2', '#67C1E6', '#D3C7E4', '#E9B61B', '#C3CCD9', '#586D91', '#C3EADE', '#55D0A4', '#568BF2', '#695CF2', '#EFE2B6'],
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '饼图',
                type: 'pie',
                radius: '50%',
                label: {
                    show: true,
                    position: 'inside'
                },
                itemStyle: {
                    normal: {
                        color: function (param) {
                            let colorList = ['#8C5DB6', '#C8E5F2', '#67C1E6', '#D3C7E4'];
                            return colorList[param.dataIndex];
                        }
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: dataObj.insideData,
            },
            {
                name: '圆环',
                type: 'pie',
                radius: ['50%', '75%'],
                itemStyle: {
                    normal: {
                        color: function (param) {
                            let colorList = ['#E9B61B', '#C3CCD9', '#586D91', '#C3EADE', '#55D0A4', '#568BF2', '#695CF2', '#EFE2B6'];
                            return colorList[param.dataIndex];
                        }
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: dataObj.outsideData,
            },
        ]
    };
    chart.setOption(option);
    $(window).resize(function () {
        setTimeout(function () {
            chart.resize();
        }, 50)
    });
}

//业务办理趋势
function getBusinessTrendData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: {
            xAxis: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
            seriesData: [7, 5, 8, 3, 1, 2, 5, 4, 8, 9, 4, 2, 7, 5, 8, 3, 1, 2, 5, 4, 8, 9, 4, 2]
        }
    }
    drawBusinessTrendChart(result.data);
}

//业务办理趋势柱状图
function drawBusinessTrendChart(dataObj) {
    let chart = echarts.init(document.getElementById('business-trend-chart'));
    let option = {
        color: ['#568BF2'],
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '15%'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            data: dataObj.xAxis
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {color: '#353E47'}
            }
        },
        series: {
            name: '业务办理量',
            type: 'bar',
            barMaxWidth: resizeFont(20),
            data: dataObj.seriesData
        },
    };
    chart.setOption(option);
    $(window).resize(function () {
        setTimeout(function () {
            chart.resize();
        }, 50)
    });
}

//业务办理失败分析
function getFailBusinessData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: {
            xAxis1: ['单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位'],
            xAxis2: ['单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位'],
            seriesData1: [20, 18, 16, 14, 12, 10, 8, 6, 4, 2],
            seriesData2: [20, 18, 16, 14, 12, 10, 8, 6, 4, 2],
        }
    }

    // 处理数据...
    let dataObj1 = {
        title: '办理失败单位TOP10',
        color: ['#F2A311'],
        yAxis: ['单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位'],
        seriesData: [20, 18, 16, 14, 12, 10, 8, 6, 4, 2],
    }

    let dataObj2 = {
        title: '办理失败业务TOP10',
        color: ['#6DB20B'],
        yAxis: ['单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位', '单位单位单位单位单位单位单位单位'],
        seriesData: [20, 18, 16, 14, 12, 10, 8, 6, 4, 2],
    }

    drawFailBusinessChart('fail-unit-chart', dataObj1);//办理失败单位TOP10
    drawFailBusinessChart('fail-business-chart', dataObj2);//办理失败业务TOP10
}

//业务办理失败柱状图
function drawFailBusinessChart(id, dataObj) {
    let chart = echarts.init(document.getElementById(id));
    let option = {
        color: dataObj.color,
        title: {
            show: true,
            top: '10%',
            left: '2%',
            text: dataObj.title,
            textStyle: {
                color: '#fff',
                fontSize: resizeFont(20)
            }
        },
        grid: {
            left: '30%',
            right: '5%',
            top: '20%',
            bottom: '5%'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: dataObj.yAxis,
            inverse: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#4A5865'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                formatter: function (value, index) {
                    if (value.length > 9) {
                        return value.substr(0, 9) + '...'
                    } else {
                        return value
                    }
                }
            }
        },
        series: {
            name: '授权支付',
            type: 'bar',
            barMaxWidth: resizeFont(18),
            data: dataObj.seriesData
        },
    };
    chart.setOption(option);
    $(window).resize(function () {
        setTimeout(function () {
            chart.resize();
        }, 50)
    });
}

//地图部分
function getMapData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: [
            {
                "name": "万州区",
                "total": 2311,
                "totalChange": 22,
                "success": 5,
                "successChange": -3,
                "fail": 220,
                "failChange": 13,
                "failrate": 22,
                "failrateChange": -1
            },
            {
                "name": "开州区",
                "total": 1587,
                "totalChange": -50,
                "success": 40,
                "successChange": 70,
                "fail": 300,
                "failChange": -35,
                "failrate": 30,
                "failrateChange": 3
            },
            {
                "name": "梁平区",
                "total": 1587,
                "totalChange": -50,
                "success": 40,
                "successChange": 70,
                "fail": 300,
                "failChange": -35,
                "failrate": 30,
                "failrateChange": 3
            },

            {
                "name": "云阳县",
                "total": 1587,
                "totalChange": -50,
                "success": 40,
                "successChange": 70,
                "fail": 300,
                "failChange": -35,
                "failrate": 30,
                "failrateChange": 3
            },

            {
                "name": "巫山县",
                "total": 1587,
                "totalChange": -50,
                "success": 40,
                "successChange": 70,
                "fail": 300,
                "failChange": -35,
                "failrate": 30,
                "failrateChange": 3
            },
        ]
    }
    // 处理数据...
    cityLength = result.data.length;
    initMap(result.data);
}

function initMap(dataObj) {
    echarts.registerMap('chongqing', mapJson);
    mapChart = echarts.init(document.getElementById('map-chart'));
    let option = {
        tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            position: 'inside'  //设置定位很重要不然提示框会偏移
        },
        series: [
            {
                name: '业务办理统计',
                type: 'map',
                map: 'chongqing',
                layoutCenter: ['0%', '0%'],
                itemStyle: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    }
                },
                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    }
                },
                data: dataObj
            }
        ]
    };
    autoPlay(dataObj);
    mapChart.setOption(option);
    // //鼠标进入取消轮播
    // mapChart.on('mouseover', function (param) {
    //     debugger
    //     clearInterval(timer);
    // })
    // //鼠标离开开启轮播
    // mapChart.on('mouseout', function (param) {
    //     debugger
    //     autoPlay(dataObj);
    // })
    $(window).resize(function () {
        setTimeout(function () {
            mapChart.resize();
        }, 50)
    });
}

//获取全省办理总数相关数据
function getProvinceTotalData() {
    // let param = { date: '2021-09-25' };
    // getDataAjax({
    //     url: 'xxx',
    //     param: param,
    //     callback: function (result) {
    //         if (result && result.data) {
    //         }
    //     }
    // })

    let result = {
        code: 200,
        msg: '执行成功',
        data: {
            "name": "开州区",
            "total": 2311,
            "totalChange": 22,
            "success": 1005,
            "successChange": -30,
            "fail": 220,
            "failChange": 13,
            "failrate": 22,
            "failrateChange": -5
        },
    }

    let arr = ['totalChange', 'successChange', 'failChange', 'failrateChange'];

    let data = result.data;
    $('#province-total').text(data.total);//办理总数
    $('#province-total-change').text(Math.abs(data.totalChange));
    $('#province-success').text(data.success);//办理成功
    $('#province-success-change').text(Math.abs(data.successChange));
    $('#province-fail').text(data.fail);//办理失败
    $('#province-fail-change').text(Math.abs(data.failChange));
    $('#province-failrate').text(data.failrate);//失败率
    $('#province-failrate-change').text(Math.abs(data.failrateChange));

    //更换箭头和文字颜色
    $.each(arr, function (index, value) {
        if (data[value] > 0) {
            $('.' + value + 'Img').attr('src', '../img/icon-arrow-up.png');
            $('.' + value + 'Img').parent().find('.color').removeClass('self-green').addClass('self-yellow');
        } else {
            $('.' + value + 'Img').attr('src', '../img/icon-arrow-down.png');
            $('.' + value + 'Img').parent().find('.color').removeClass('self-yellow').addClass('self-green');
        }
    })

}

//自动轮播地图
function autoPlay(dataObj) {
    var index = 0; //城市切换索引
    timer = setInterval(function () {
        mapChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0
        });
        mapChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index
        });
        if (dataObj != undefined) {
            setData(dataObj[index]);
            index++;
            if (index >= cityLength) {
                tabIndex++;
                //切换tab的active
                $(".tab").find('li').each(function () {
                    $(this).removeClass('active');
                })
                $(".tab").find('li').eq(tabIndex).addClass('active');

                // getMapData();//开始新一轮的轮播
                if (tabIndex == 3) {
                    tabIndex = 0;
                    $(".tab").find('li').eq(0).addClass('active');
                }
                index = 0;
            }
        }

    }, 1000)
}


//根据轮播地图块切换panel面板信息
function setData(param) {
    let data = param;
    let arr = ['totalChange', 'successChange', 'failChange', 'failrateChange'];
    if (data) {
        for (key in data) {
            if (key === 'name') {
                $('#' + key).text(data[key]);
            } else {
                $('#' + key).text(Math.abs(data[key]));
            }
        }
        //更换箭头和文字颜色
        $.each(arr, function (index, value) {
            if (data[value] > 0) {
                $('#' + value + 'Img').attr('src', '../img/icon-arrow-up.png');
                $('#' + value).parent().find('.color').removeClass('self-green').addClass('self-yellow');
            } else {
                $('#' + value + 'Img').attr('src', '../img/icon-arrow-down.png');
                $('#' + value).parent().find('.color').removeClass('self-yellow').addClass('self-green');
            }
        })
    }
}